import React, { Component } from 'react'
import Mytab from '../root/Mytab'
import Touxiang from '../root/Touxiang'
import '../root/business.css'
import pxPage from '../../root/pxPage'
import { getbusidlist, getbuslist, getMsg, delsp } from '../../redux/actionCreator'
import { withRouter } from "react-router-dom"
import { connect } from 'react-redux'
import { Grid } from 'antd-mobile';
const deviceHight = document.documentElement.clientHeight
const itemStyl = {
    height: pxPage(158), width: pxPage(338), backgroundColor: 'black', marginTop: '16px', position: 'relative',
}

const dataimg = {
    width: pxPage(101),
    height: pxPage(112),
    position: 'absolute',
    top: pxPage(20),
    left: pxPage(10),
    objectFit: 'cover'
}
const bushomedataitemspanone = {
    width: pxPage(220),
    height: pxPage(27),
    position: 'absolute',
    left: pxPage(116),
    top: pxPage(21),
    fontSize: pxPage(18)
}

const bushomedataitemdivone = {
    width: pxPage(140),
    height: pxPage(15),
    position: 'absolute',
    left: pxPage(116),
    top: pxPage(61),
    fontSize: pxPage(10)
}

const bushomedataitemdivtwo = {
    width: pxPage(140),
    height: pxPage(15),
    position: 'absolute',
    left: pxPage(116),
    top: pxPage(81),
    fontSize: pxPage(10)
}

const bushomedataitemdivthree = {
    width: pxPage(140),
    height: pxPage(15),
    position: 'absolute',
    left: pxPage(116),
    top: pxPage(101),
    fontSize: pxPage(10)
}

const bushomedataitemdivfour = {
    width: pxPage(30),
    height: pxPage(21),
    position: 'absolute',
    left: pxPage(116),
    bottom: pxPage(15),
    fontSize: pxPage(10)
}

const bushomedataitemdivfive = {
    width: pxPage(30),
    height: pxPage(21),
    position: 'absolute',
    left: pxPage(166),
    bottom: pxPage(15),
    fontSize: pxPage(10)
}
const bushomedataitemdivsix = {
    width: pxPage(50),
    height: pxPage(21),
    position: 'absolute',
    left: pxPage(216),
    bottom: pxPage(15),
    fontSize: pxPage(10)
}
const bushomedataitemdivseveb = {
    width: pxPage(50),
    height: pxPage(21),
    position: 'absolute',
    left: pxPage(266),
    bottom: pxPage(15),
    fontSize: pxPage(10)
}
const dataitembottomimg = {
    width: pxPage(44),
    height: pxPage(44),
}

const getHeight = (deviceHight, num) => {
    let result = deviceHight - pxPage(140 + 175 * num) - 50 - 175
    if (result > 0) {
        return result
    } else {
        return 0
    }
}
class Gridbushome extends Component {
    constructor(props) {
        super(props);
        this.props.dispatch(getbusidlist(getMsg(this.props).business_id))//根据商家ID去拿到数据
    }
    render() {
        return (<>
            <Grid
                data={this.props.shop}
                columnNum={1}
                itemStyle={itemStyl}
                activeStyle={false}
                hasLine={false}
                onClick={dataItem => {
                    // this.props.history.push({ pathname: "/shangpin", state: dataItem.id })
                }}
                hasLine={false}
                renderItem={dataItem => (
                    <div className='bushome-dataitem' style={{ width: pxPage(338), height: pxPage(158), borderRadius: '11px', position: 'relative' }}>
                        <img className='buhome-dataitem-img' style={dataimg} src={`http://www.h5weixin.club:1025/api/image/${dataItem.commodity_pic}`} alt=''></img>
                        <span className='bushome-dataitem-span-one'
                            style={bushomedataitemspanone}
                        >{getMsg(this.props).business_name}·{dataItem.commodity_title}</span>
                        <div className='bushome-dataitem-div-one'
                            style={bushomedataitemdivone}
                        >
                            <i className='iconfont icon-yuyue'></i>
                            <span>{dataItem.commodity_time}</span>
                        </div>
                        {/* 下面是地点 */}
                        <div className='bushome-dataitem-div-one'
                            style={bushomedataitemdivtwo}
                        >
                            <i className='iconfont icon-position-fill'></i>
                            <span>{getMsg(this.props).business_address}</span>
                        </div>
                        {/* 单价 */}
                        <div className='bushome-dataitem-div-one'
                            style={bushomedataitemdivthree}
                        >
                            <i className='iconfont icon-jinqian'></i>
                            <span>{dataItem.commodity_money}</span>
                        </div>
                        {/* 预约 */}
                        <div className='bushome-dataitem-div-one'
                            style={bushomedataitemdivfour}
                        >
                            <i className='iconfont icon-yuyue1'></i>
                            <span>{dataItem.commodity_appoint}</span>
                        </div>
                        {/* 收藏 */}
                        <div className='bushome-dataitem-div-one'
                            style={bushomedataitemdivfive}
                        >
                            <i className='iconfont icon-xin1'></i>
                            <span>{dataItem.commodity_collect}</span>
                        </div>
                        {/* 修改 */}
                        <div className='bushome-dataitem-div-one'
                            style={bushomedataitemdivsix}
                            onClick={() => {
                                this.props.history.push(`/bushome/modify/${dataItem.commodity_id}`)
                            }}
                        >
                            <i className='iconfont icon-bi'></i>
                            <span>修改</span>
                        </div>
                        {/* 删除 */}
                        <div className='bushome-dataitem-div-one'
                            style={bushomedataitemdivseveb}
                            onClick={() => {
                                this.props.dispatch(delsp(dataItem.commodity_id, getMsg(this.props).business_id, getMsg(this.props).business_password))
                            }}
                        >
                            <i className='iconfont icon-cancel'></i>
                            <span>删除</span>
                        </div>
                    </div>
                )
                }
            />
            <div className='dataitem-bottom'
                onClick={() => {
                    this.props.history.push('/bushome/release')
                }}
            >
                <img className='dataitem-bottom-img' style={dataitembottomimg} src='./images/md-control_point.svg'></img>
            </div>
            <div
                style={{ height: getHeight(deviceHight, this.props.shop.length), width: '100%', backgroundColor: 'black' }}
                className='dataitem-bottom-two'>
            </div>
            <Mytab />
        </>
        )
    }
}
const mapStateToProps = (state) => ({
    login: state.login,
    shop: state.shop,
    business: state.business
})
export default withRouter(connect(mapStateToProps)(Gridbushome))